/* Obecný styl pro všechny benefitBanner – platí na všech zařízeních jako základ */
body .benefitBanner {
    background-color: #e3f1ff !important; /* Světle modrá s vysokou prioritou */
    padding: 20px 20px 5px 20px !important; /* Horní: 20px, boční: 20px, dolní: 5px */
    border-radius: 20px !important; /* Zaoblení: 20px */
    margin-bottom: 10px !important; /* Základní mezera pod blokem */
}

/* Snížení spodní mezery uvnitř položek (pro texty) – platí všude */
body .benefitBanner__item {
    margin-bottom: 0 !important; /* Zachováno */
}
body .benefitBanner__data p:last-child {
    margin-bottom: 0 !important; /* Zachováno */
}

/* Specificky pro homepage: Větší mezera POD blokem – platí všude */
body .benefitBanner.position--benefitHomepage {
    margin-bottom: 50px !important; /* Zachováno */
    padding-bottom: 5px !important; /* Zachováno */
    background-color: #e3f1ff !important; /* Světle modrá */
    border-radius: 20px !important; /* Zaoblení */
}

/* Pro produktové stránky a kategorie – platí všude */
body .benefitBanner.position--benefitProduct,
body .benefitBanner.position--benefitCategory {
    padding: 20px 20px 5px 20px !important;
    margin-bottom: 10px !important;
    background-color: #e3f1ff !important; /* Světle modrá */
    border-radius: 20px !important; /* Zaoblení */
}

/* Responsivní úpravy pro různá zařízení – duplikujeme klíčové styly pro jistotu */

/* Mobilní zařízení (do 768px šířky) – menší padding pro lepší fit */
@media screen and (max-width: 768px) {
    body .benefitBanner,
    body .benefitBanner.position--benefitHomepage,
    body .benefitBanner.position--benefitProduct,
    body .benefitBanner.position--benefitCategory {
        background-color: #e3f1ff !important;
        padding: 15px 15px 5px 15px !important; /* Menší padding na mobilu */
        border-radius: 15px !important; /* Menší zaoblení pro mobil */
        margin-bottom: 10px !important;
    }
    body .benefitBanner.position--benefitHomepage {
        margin-bottom: 30px !important; /* Menší mezera na mobilu */
    }
}

/* Tablety (769-1024px šířky) – střední úpravy */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body .benefitBanner,
    body .benefitBanner.position--benefitHomepage,
    body .benefitBanner.position--benefitProduct,
    body .benefitBanner.position--benefitCategory {
        background-color: #e3f1ff !important;
        padding: 20px 20px 5px 20px !important;
        border-radius: 20px !important;
        margin-bottom: 10px !important;
    }
    body .benefitBanner.position--benefitHomepage {
        margin-bottom: 40px !important; /* Lehce menší než na desktopu */
    }
}

/* Standardní desktopy (1025-1920px, včetně vašeho 1920x1080) */
@media screen and (min-width: 1025px) and (max-width: 1920px) {
    body .benefitBanner,
    body .benefitBanner.position--benefitHomepage,
    body .benefitBanner.position--benefitProduct,
    body .benefitBanner.position--benefitCategory {
        background-color: #e3f1ff !important;
        padding: 20px 20px 5px 20px !important;
        border-radius: 20px !important;
        margin-bottom: 10px !important;
    }
    body .benefitBanner.position--benefitHomepage {
        margin-bottom: 50px !important;
    }
}

/* Velké monitory (>1920px, např. 4K nebo ultra-wide) */
@media screen and (min-width: 1921px) {
    body .benefitBanner,
    body .benefitBanner.position--benefitHomepage,
    body .benefitBanner.position--benefitProduct,
    body .benefitBanner.position--benefitCategory {
        background-color: #e3f1ff !important;
        padding: 25px 25px 5px 25px !important; /* Lehce větší padding pro velké obrazovky */
        border-radius: 20px !important;
        margin-bottom: 10px !important;
    }
    body .benefitBanner.position--benefitHomepage {
        margin-bottom: 60px !important; /* Větší mezera pro široké zobrazení */
    }
}